var x = $(document);
x.ready(efectosHome);

function efectosHome() {

    //Forzar la carga de imágenes

    var puchi = $(".puchi .selector");
    puchi.mouseover(function() {
        mostrar("puchi");
        mostrarNombrePuchi();
    });
    puchi.mouseout(function() {
        ocultar("puchi");
        ocultarNombrePuchi();
    });

    var sergio = $(".sergio .selector");
    sergio.mouseover(function() {
        mostrar("sergio");
        mostrarNombreSergio();
    });
    sergio.mouseout(function() {
        ocultar("sergio");
        ocultarNombreSergio();
    });

    var marcelo = $(".marcelo .selector");
    marcelo.mouseover(function() {
        mostrar("marcelo");
        mostrarNombreMarcelo();
    });
    marcelo.mouseout(function() {
        ocultar("marcelo");
        ocultarNombreMarcelo();
    });

    var chino = $(".chino .selector");
    chino.mouseover(function() {
        mostrar("chino");
        mostrarNombreChino();
    });
    chino.mouseout(function() {
        ocultar("chino");
        ocultarNombreChino();
    });


    //EFECTOS LOGO
    var logo = $(".logo .selector");
    logo.mouseover(function() {
        logo.css("background", "url(" + datosServ.template_url + "/images/logo-hover.png) no-repeat scroll center 100% transparent");
        logo.css("background-size", "100% auto;");
        logo.animate({
            width: '+=20',
            height: '+=20',
            left: '-=10',
            top: '-=10'
        }, 300);
        $(".logo .nombre").fadeIn();
    });
    logo.mouseout(function() {
        logo.css("background", "url(" + datosServ.template_url + "/images/logo.png) no-repeat scroll center 100% transparent");
        logo.css("background-size", "100% auto;");
        logo.animate({
            width: '-=20',
            height: '-=20',
            left: '+=10',
            top: '+=10'
        }, 50);
        $(".logo .nombre").stop(true, true).hide();
    });

    //EFECTOS AGENDA
    var agenda = $(".agenda");
    agenda.mouseover(function() {
        $(".agenda .selector").css("background", "url(" + datosServ.template_url + "/images/agenda-hover.png) no-repeat scroll center 100% transparent");
        $(".agenda .selector").css("backgronud-size", "100% auto");
        $(".agenda .selector").stop(true, true).animate({
            width: '+=20',
            height: '+=20',
            left: '-=10',
            top: '-=10'
        }, 300);
        $(".agenda .nombre").fadeIn();
    });
    agenda.mouseout(function() {
        $(".agenda .selector").css("background", "url(" + datosServ.template_url + "/images/agenda.png) no-repeat scroll center 100% transparent");
        $(".agenda .selector").css("backgronud-size", "100% auto");
        $(".agenda .selector").stop(true, true).animate({
            width: '-=20',
            height: '-=20',
            left: '+=10',
            top: '+=10'
        }, 50);
        $(".agenda .nombre").stop(true, true).hide();
    });


    //EFECTOS DISCOS
    var discos = $(".discos");
    discos.mouseover(function() {
        $(".discos .selector").css("background", "url(" + datosServ.template_url + "/images/disco-hover.png) no-repeat scroll center 100% transparent");
        $(".discos .selector").css("backgronud-size", "100% auto");
        $(".discos .selector").stop(true, true).animate({
            width: '+=20',
            height: '+=20',
            left: '-=10',
            top: '-=10'
        }, 300);
        $(".discos .nombre").fadeIn();
    });
    discos.mouseout(function() {
        $(".discos .selector").css("background", "url(" + datosServ.template_url + "/images/disco.png) no-repeat scroll center 100% transparent");
        $(".discos .selector").css("backgronud-size", "100% auto");
        $(".discos .selector").stop(true, true).animate({
            width: '-=20',
            height: '-=20',
            left: '+=10',
            top: '+=10'
        }, 50);
        $(".discos .nombre").stop(true, true).hide();
    });


    //EFECTOS TELEVISOR
    var tele = $(".televisor");
    tele.mouseover(function() {
        $(".televisor .selector").css("background", "url(" + datosServ.template_url + "/images/tele-hover.png) no-repeat scroll center 100% transparent");
        $(".televisor .selector").css("backgronud-size", "100% auto");
        $(".televisor .selector").stop(true, true).animate({
            width: '+=20',
            height: '+=20',
            left: '-=10',
            top: '-=10'
        }, 300);
    });
    tele.mouseout(function() {
        $(".televisor .selector").css("background", "url(" + datosServ.template_url + "/images/tele.png) no-repeat scroll center 100% transparent");
        $(".televisor .selector").css("backgronud-size", "100% auto");
        $(".televisor .selector").stop(true, true).animate({
            width: '-=20',
            height: '-=20',
            left: '+=10',
            top: '+=10'
        }, 100);
    });
}




function mostrar(musico) {
    $("." + musico).css("background", "url(" + datosServ.template_url + "/images/" + musico + ".png) no-repeat scroll center 100% transparent");
    $("." + musico).css("backgronud-size", "100% auto");

// $(".container").css("background", "url(" + datosServ.template_url + "/images/banda-over.jpg) no-repeat scroll center center / 100% auto transparent");
}

function ocultar(musico) {
    $("." + musico).css("background", "none");
    $("." + musico + " .nombre").hide("fast");
// $(".container").css("background", "url(" + datosServ.template_url + "/images/banda.jpg) no-repeat scroll center center / 100% auto transparent");
}

function mostrarNombrePuchi() {
    $(".puchi .nombre").stop(true, true).show().animate({
        left: '-=200'
    }, 500);
}
function ocultarNombrePuchi() {
    $(".puchi .nombre").stop(true, true).hide().animate({
        left: '+=200'
    }, 0);
}

function mostrarNombreChino() {
    $(".chino .nombre").stop(true, true).show().animate({
        top: '-=300'
    }, 500);
}
function ocultarNombreChino() {
    $(".chino .nombre").stop(true, true).hide().animate({
        top: '+=300'
    }, 0);
}

function mostrarNombreMarcelo() {
    $(".marcelo .nombre").stop(true, true).show().animate({
        left: '+=470'
    }, 500);
}
function ocultarNombreMarcelo() {
    $(".marcelo .nombre").stop(true, true).hide().animate({
        left: '-=470'
    }, 0);
}

function mostrarNombreSergio() {
    $(".sergio .nombre").stop(true, true).show().animate({
        top: '+=230'
    }, 500);
}
function ocultarNombreSergio() {
    $(".sergio .nombre").stop(true, true).hide().animate({
        top: '-=230'
    }, 0);
}

